<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        select {
            width: 100px;
        }
    </style>
</head>

<body>
    <select name="" id="province" onchange="pro(this.value)">
        <option value="请选择省份">请选择省份</option>
    </select>
    <select name="" id="city" onchange="cit(this.value)">
        <option value="请选择省份">请选择城市</option>
    </select>
    <select name="" id="country">
        <option value="请选择省份">请选择县</option>
    </select>
    <script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
    <script>
        var data = {
            '湖南': {

                "常德": ["石门", "桃源", "临澧", "汉寿"],

                "益阳": ["益阳1", "益阳2", "益阳3"],

                "岳阳": ["岳阳1", "岳阳2", "岳阳3", "岳阳4", "岳阳5", "岳阳6", "岳阳7"],

                "永州": ["永州1", "永州2"],

                "郴州": ["郴州1", "郴州2", "郴州3"],

                "湘潭": ["湘潭1", "湘潭2", "湘潭3"]

            },
            '广东': {

                "广州": ["广州1", "广州2", "广州3"],

                "珠海": ["珠海1", "珠海2", "珠海3"],

                "佛山": ["佛山1"]

            },
            '河南': {

                "郑州": ["惠济", "中原", "二七"],

                "洛阳": ["洛阳1", "洛阳2", "洛阳3"],

                "信阳": ["息县", "潢川", "固始", "商城"]

            }
        }
        var p = "";
        for (var key in data) {
            p += '<option>' + key + '</option>'
        }
        $('#province').append(p);

        var pname = "";
        function pro(a) {
            var c = "";
            $('#city').html('<option value="请选择市">请选择市</option>');
            $('#country').html('<option value="请选择县">请选择县</option>');

            for (var k in data[a]) {
                c += '<option>' + k + '</option>'
            }
            $('#city').append(c);
            pname = a;

        }

        function cit(a) {
            var cou = "";

            $('#country').html('<option value="请选择县">请选择县</option>');
            for (var k in data[pname][a]) {
                cou += '<option>' + data[pname][a][k] + '</option>'
            }
            $('#country').append(cou);
        }
    </script>

</body>

</html>